<template>
  <el-card class="w-full pt-[5px] mt-[10px]">
    <el-table :data="tableData" class="w-full" stripe row-key="id" ref="tableRef">
      <el-table-column prop="projectClass" label="项目性质" width="90" >
        <template #default="{ row }">
          <CommonLabel :dataList="projectClassList" :value="row.projectClass" />
        </template>
      </el-table-column>
      <el-table-column prop="type" label="规则类型" width="90">
        <template #default="{ row }">
          <span v-if="row.type =='2'">项目编号</span>
          <span v-else-if="row.type =='1'">经费卡号</span>
          <span v-else>申报项目编号</span>
        </template>
      </el-table-column>
      <el-table-column prop="expressionText" label="编号规则" width="240" />
      <el-table-column prop="applyrangeName" label="适用范围" />
      <el-table-column fixed="right" label="操作" width="90" align="center">
        <template #default="{ row }">
          <el-button type="primary" size="small" plain @click="handleEdit(row)"> 编辑 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-[20px] flex justify-end">
      <el-pagination v-bind="pagination" @update:current-page="currentChange" @update:page-size="sizeChange" />
    </div>
  </el-card>
  <EditModal ref="editModalRef" @save-success="search" />
</template>

<script setup>
import useTable from "@/hooks/useTable";
import CommonLabel from "@/views/fee/components/CommonLabel.vue";
import { getList } from "@/api/fee/rz/snrule/index.js";
import useCommonFetch from "@/hooks/useCommonFetch";
import EditModal from "./EditModal.vue";
const tableRef = ref();
const editModalRef = ref();
const projectClassList = useCommonFetch("项目性质");//项目性质
const { loading, pagination, sizeChange, currentChange, tableData, handleDelete, search } =
useTable((pagin) => 
  getList({
      pageNum: pagin.pageNum,
      pageSize: pagin.pageSize,
    })
  );

//点击编辑
const handleEdit = (row) => {
  editModalRef.value.edit(row);
};

</script>
<style scoped lang="scss"></style>